<template>
  <div>
    <div class="head-content">
      <el-checkbox v-model="componentType.title">是否需要Title组件</el-checkbox>
      <el-checkbox v-model="componentType.tabs">是否需要Tabs组件</el-checkbox>
      <el-checkbox v-model="componentType.table">是否需要Table组件</el-checkbox>
      <el-checkbox v-model="componentType.dialog">是否需要Dialog组件</el-checkbox>
    </div>
    <div class="content-left">
      <div class="parent">
        <div class="leftChild1">
          <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
            <div class="s">
              <el-button type="danger" @click="baseFieldsClick('basics')">基础字段配置</el-button>
            </div>
            <div v-if="componentType.title" class="s">
              <el-button type="primary" @click="toConfigureTypeClick('title')">Title 配置</el-button>
              <el-button type="success" @click="configurationCodeClick('title')">Title 配置代码</el-button>
              <el-button type="warning" @click="titleCodeGenerationClick">Title 代码生成</el-button>
            </div>
            <div v-if="componentType.tabs" class="s">
              <el-button type="primary" @click="toConfigureTypeClick('tabs')">Tabs 配置</el-button>
              <el-button type="success" @click="configurationCodeClick(2)">Tabs 配置代码</el-button>
              <el-button type="warning" @click="codeGenerationClick(2)">Tabs 代码生成</el-button>
            </div>
            <div v-if="componentType.table" class="s">
              <el-button type="primary" @click="toConfigureTypeClick(3)">Table 配置</el-button>
              <el-button type="success" @click="configurationCodeClick(3)">Table 配置代码</el-button>
              <el-button type="warning" @click="codeGenerationClick(3)">Table 代码生成</el-button>
            </div>
            <div v-if="componentType.dialog" class="s">
              <el-button type="primary" @click="toConfigureTypeClick(4)">Dialog 配置</el-button>
              <el-button type="success" @click="configurationCodeClick(4)">Dialog 配置代码</el-button>
              <el-button type="warning" @click="codeGenerationClick(4)">Dialog 代码生成</el-button>
            </div>
          </el-scrollbar>
        </div>
        <div class="leftChild2">
          <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
            <!--配置代码查看-->
            <div class="configurationCode-css" v-if="configureButtonProp.show" style="margin: 12px">
              <el-button type="primary" @click="JsonSubumit" class="pd12">保存JSON</el-button>
              <b-code-editor
                  v-model="configureButtonProp.jsonData"
                  theme="dracula"
                  :line-wrap="false"
              >
              </b-code-editor>
            </div>
            <!--代码生成查看-->
            <div class="codeGeneration-css" v-if="codeGenerationProp.show" style="margin: 12px">
              <el-button
                  type="primary"
                  icon="el-icon-document-copy"
                  class="tag pd12"
                  @click="copyButClick(codeGenerationProp.allVue)"
              >复制 Vue 代码
              </el-button>
              <el-button
                  type="success"
                  icon="el-icon-document-copy"
                  class="tag pd12"
                  @click="copyButClick(codeGenerationProp.allMethodsData)"
              >复制 方法
              </el-button>
              <el-button
                  type="warning"
                  icon="el-icon-document-copy"
                  class="tag pd12"
                  @click="copyButClick(codeGenerationProp.allData)"
              >复制 data 数据
              </el-button>
              <el-input
                  type="textarea"
                  autosize
                  placeholder="生成的vue"
                  v-model="codeGenerationProp.allVueData">
              </el-input>
            </div>
            <!--配置相关-->
            <template v-if="!configureButtonProp.show && !codeGenerationProp.show">
              <!--基础配置-->
              <div v-if="configureButtonProp.type=='basics'">
                <div class="content-left">
                  <div class="parent">
                    <!--分组设置左边-->
                    <div class="leftChild3">
                      <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
                        <div class="basics-content-left">
                          <div class="title">
                            <el-input v-model="basicsProp.addBasics" placeholder="请输入分组名称" clearable></el-input>
                            <el-button type="primary" @click="groupingAddClick">添加</el-button>
                          </div>
                          <ul class="content">
                            <draggable v-model="basicsProp.listProp">
                              <li v-for="(item,key) in basicsProp.listProp" :key="key" @click="groupingListClick(key)">
                                <div :class="[basicsProp.active==key?'active':'']">
                                  <span>{{ item.title }}</span>
                                  <i class="el-icon-error" @click.stop="groupingDelClick(key)"></i>
                                </div>
                              </li>
                            </draggable>
                          </ul>
                        </div>
                      </el-scrollbar>
                    </div>
                    <!--分组设置右边-->
                    <div class="leftChild4">
                      <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
                        <div class="basics-content-right">
                          <ul class="s">
                            <li class="n">
                              <span>名称</span>
                              <el-input v-model="basicsProp.addField.name" placeholder="请输入名称" clearable></el-input>
                              <span>字段名称</span>
                              <el-input v-model="basicsProp.addField.field" placeholder="请输入名称" clearable></el-input>
                              <span>字段类型</span>
                              <el-select v-model="basicsProp.addField.type" placeholder="请选择字段类型">
                                <el-option
                                    v-for="item in fieldTypeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                              </el-select>
                              <el-button class="pl12" type="primary" icon="el-icon-plus el-icon--left"
                                         @click="fieldAddClick">
                                添加字段
                              </el-button>
                            </li>
                            <li class="content">
                              <div
                                  v-for="(item,key) in basicsProp.listProp[basicsProp.active].fieldProp"
                                  :key="key"
                                  class="content-main"
                              >
                                <div>{{ item.name }}<i class="el-icon-edit" @click="fieldEditIconClick(key)"></i></div>
                                <div>{{ item.field }}<i class="el-icon-delete" @click="fieldDelIconClick(key)"></i>
                                </div>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </el-scrollbar>
                    </div>
                  </div>
                </div>
              </div>
              <!--title 配置-->
              <ul class="s" v-if="configureButtonProp.type=='title'">
                <li class="n">
                  <span>标题名称</span>
                  <el-input v-model="titleProp.name" placeholder="请输入标题名称" clearable></el-input>
                  <span>class名称</span>
                  <el-input v-model="titleProp.class" placeholder="请输入class名称" clearable></el-input>
                </li>
                <li class="n">
                  <el-button class="pl12" type="primary" icon="el-icon-plus el-icon--left" @click="titleButAddClick">
                    添加操作按钮
                  </el-button>
                </li>
                <draggable v-model="titleProp.operate">
                  <li v-for="(item,key) in titleProp.operate" :key="key" class="bo">
                    <div class="n">
                      <span>按钮名称</span>
                      <el-input v-model="item.name" placeholder="请输入按钮名称" clearable></el-input>
                      <span>按钮颜色</span>
                      <el-select v-model="item.type" placeholder="请选择按钮颜色">
                        <el-option
                            v-for="item in butColorOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="n">
                      <span>按钮图标</span>
                      <e-icon-picker v-model="item.icon"/>
                      <div class="n1">
                        <span>是否朴素</span>
                        <el-radio v-model="item.plain" :label="true">是</el-radio>
                        <el-radio v-model="item.plain" :label="false">否</el-radio>
                      </div>
                      <div class="n1">
                        <span>是否圆角</span>
                        <el-radio v-model="item.round" :label="true">是</el-radio>
                        <el-radio v-model="item.round" :label="false">否</el-radio>
                      </div>
                    </div>
                    <div class="n">
                      <span>按钮类型</span>
                      <el-select v-model="item.butType" placeholder="请选择按钮类型"
                                 @change="titleButTypeClick(item.butType,key)">
                        <el-option
                            v-for="item in butTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                      <span>按钮方法</span>
                      <el-input v-model="item.method" placeholder="请输入按钮方法" clearable></el-input>
                      <span>显示权限</span>
                      <el-input v-model="item.id" placeholder="请输入显示权限，空默认显示" clearable></el-input>
                    </div>
                    <div class="n">
                      <el-button class="pl12" type="danger" icon="el-icon-delete el-icon--left"
                                 @click="titleButDelClick(key)">删除
                      </el-button>
                    </div>
                  </li>
                </draggable>
              </ul>
              <!--tabs配置-->
              <ul class="s" v-if="configureButtonProp.type=='tabs'">
                <li class="n">
                  <span>默认状态</span>
                  <el-input v-model="tabsProp.tabsActive" placeholder="请输入默认状态" clearable></el-input>
                  <span>tabs点击方法</span>
                  <el-input v-model="tabsProp.tabsClick" placeholder="请输入默认状态" clearable></el-input>
                  <span>切换状态字段</span>
                  <el-input v-model="tabsProp.tabsSwitchField" placeholder="请输入默认状态" clearable></el-input>
                </li>
                <li class="n">
                  <el-button type="primary" class="pl12" icon="el-icon-plus el-icon--left" @click="tabsButAddClick">
                    添加标题
                  </el-button>
                </li>
                <!--tabs标题设置-->
                <draggable v-model="tabsProp.titleList">
                  <li class="bo" v-for="(item,key) in tabsProp.titleList" :key="key">
                    <div class="n">
                      <span>标题名称</span>
                      <el-input v-model="item.name" placeholder="请输入标题名称" clearable></el-input>
                      <span>标题状态</span>
                      <el-input v-model="item.status" placeholder="请输入标题状态" clearable></el-input>
                      <span>总数字段名</span>
                      <el-input v-model="item.totalField" placeholder="请输入标题状态" clearable></el-input>
                      <el-button type="danger" class="pl12" icon="el-icon-delete el-icon--left"
                                 @click="tabsButDelClick(key)">删除
                      </el-button>
                    </div>
                  </li>
                </draggable>
                <li class="n">
                  <div class="n1">
                    <span>是否高级搜索</span>
                    <el-radio v-model="tabsProp.tabsHeightShow" :label="true">是</el-radio>
                    <el-radio v-model="tabsProp.tabsHeightShow" :label="false">否</el-radio>
                  </div>
                  <div class="n1" v-if="tabsProp.tabsHeightShow">
                    <span>是否默认下拉</span>
                    <el-radio v-model="tabsProp.tabsHeightSelectShow" :label="true">是</el-radio>
                    <el-radio v-model="tabsProp.tabsHeightSelectShow" :label="false">否</el-radio>
                  </div>
                  <div class="n1" v-if="tabsProp.tabsHeightShow">
                    <span>高级搜索方法名</span>
                    <el-input v-model="tabsProp.tabsHeightSearchClick" placeholder="请输入高级搜索方法名" clearable></el-input>
                  </div>
                </li>
                <li class="n" v-if="tabsProp.tabsHeightShow">
                  <el-button type="warning" class="pl12" icon="el-icon-plus el-icon--left"
                             @click="tabsHeightSearchButAddClick">
                    添加高级搜索字段
                  </el-button>
                </li>
              </ul>
            </template>
          </el-scrollbar>
        </div>
      </div>
    </div>


    <el-dialog
        :append-to-body="true"
        :close-on-click-modal="false"
        :show-close="false"
        :close-on-press-escape="false"
        title="字段详细配置"
        :visible.sync="fieldTypeConfig.isDialog"
        width="670px"

    >
      <!--基础配置-->
      <ul class="fieldTypeConfig-content">
        <li>
          <span>名称</span>
          <el-input v-model="fieldTypeConfig.name" placeholder="请输入名称" clearable></el-input>
        </li>
        <li>
          <span>字段名称</span>
          <el-input v-model="fieldTypeConfig.field" placeholder="请输入字段名称" clearable></el-input>
        </li>
        <li>
          <span>字段类型</span>
          <el-select v-model="fieldTypeConfig.type" placeholder="请选择字段类型">
            <el-option
                v-for="item in fieldTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </li>
        <li>
          <span>是否必填</span>
          <el-radio v-model="fieldTypeConfig.required" :label="true">是</el-radio>
          <el-radio v-model="fieldTypeConfig.required" :label="false">否</el-radio>
        </li>
        <li>
          <span>自定义验证规则</span>
          <el-input
              v-model="fieldTypeConfig.rules"
              placeholder="请输入验证规则 {},{}"
              clearable>
          </el-input>
        </li>
        <li>
          <span>可以见的端</span>
          <el-input
              v-model="fieldTypeConfig.currentPermissions"
              placeholder="请输入可以见的端用,号隔开 都可以为空"
              clearable>
          </el-input>
        </li>
        <li>
          <span class="color1">哪些端可以修改</span>
          <el-input
              v-model="fieldTypeConfig.editCurrentPermissions"
              placeholder="请输入哪些端可以修改,号隔开，都可以为空"
              clearable></el-input>
        </li>
      </ul>


      <!--文本域 类型配置-->
      <ul class="fieldTypeConfig-content" v-if="fieldTypeConfig.type=='textarea'">
        <li>
          <span>最小行数</span>
          <el-input
              v-model="fieldTypeConfig.textareaConfig.minRows"
              placeholder="请输入最小行数"
              clearable></el-input>
        </li>
        <li>
          <span>最大行数</span>
          <el-input
              v-model="fieldTypeConfig.textareaConfig.maxRows"
              placeholder="请输入最大行数"
              clearable></el-input>
        </li>
        <li>
          <span>字符长度</span>
          <el-input
              v-model="fieldTypeConfig.textareaConfig.maxlength"
              placeholder="请输入字符长度,不需要为空"
              clearable></el-input>
        </li>
      </ul>
      <!--单选框 类型配置-->
      <ul class="fieldTypeConfig-content" v-if="fieldTypeConfig.type=='radio'">
        <li>
          <el-button type="primary" icon="el-icon-plus el-icon--left" @click="optionButAddClick(fieldTypeConfig.type)">
            添加选项
          </el-button>
        </li>
        <li v-for="(item,key) in fieldTypeConfig.radioConfig.option" :key="key">
          <div class="fieldTypeConfig-content-option">
            <span>label名称</span>
            <el-input
                v-model="item.label"
                placeholder="请输入label名称"
                clearable></el-input>
            <span>value值</span>
            <el-input
                v-model="item.value"
                placeholder="请输入value值"
                clearable></el-input>
            <el-button
                type="danger"
                icon="el-icon-delete el-icon--left"
                class="pl12"
                @click="optionDelAddClick(fieldTypeConfig.type,key)">
              删除
            </el-button>
          </div>
        </li>
      </ul>
      <!--多选框-->
      <ul class="fieldTypeConfig-content" v-if="fieldTypeConfig.type=='checkbox'">
        <li>
          <span>是否有全选</span>
          <el-radio v-model="fieldTypeConfig.checkboxConfig.checkAllBoolean" :label="true">是</el-radio>
          <el-radio v-model="fieldTypeConfig.checkboxConfig.checkAllBoolean" :label="false">否</el-radio>
        </li>
        <li>
          <span>最少选几个</span>
          <el-input
              v-model="fieldTypeConfig.checkboxConfig.min"
              placeholder="请输入最少选几个，根据需求来"
              clearable></el-input>
        </li>
        <li>
          <span>最多选几个</span>
          <el-input
              v-model="fieldTypeConfig.checkboxConfig.max"
              placeholder="请输入最多选几个，根据需求来"
              clearable></el-input>
        </li>
        <li>
          <el-button type="primary" icon="el-icon-plus el-icon--left" @click="optionButAddClick(fieldTypeConfig.type)">
            添加选项
          </el-button>
        </li>
        <li v-for="(item,key) in fieldTypeConfig.checkboxConfig.option" :key="key">
          <div class="fieldTypeConfig-content-option">
            <span>label名称</span>
            <el-input
                v-model="item.label"
                placeholder="请输入label名称"
                clearable></el-input>
            <span>value值</span>
            <el-input
                v-model="item.value"
                placeholder="请输入value值"
                clearable></el-input>
            <el-button
                type="danger"
                icon="el-icon-delete el-icon--left"
                class="pl12"
                @click="optionDelAddClick(fieldTypeConfig.type,key)">
              删除
            </el-button>
          </div>
        </li>
      </ul>
      <!--下拉框-->
      <ul class="fieldTypeConfig-content" v-if="fieldTypeConfig.type=='select'">
        <li>
          <span>是否可搜索</span>
          <el-radio v-model="fieldTypeConfig.selectConfig.filterable" :label="true">是</el-radio>
          <el-radio v-model="fieldTypeConfig.selectConfig.filterable" :label="false">否</el-radio>
        </li>
        <li>
          <span>是否多选</span>
          <el-radio v-model="fieldTypeConfig.selectConfig.multiple" :label="true">是</el-radio>
          <el-radio v-model="fieldTypeConfig.selectConfig.multiple" :label="false">否</el-radio>
        </li>
        <li>
          <span>是否分组</span>
          <el-radio v-model="fieldTypeConfig.selectConfig.group" :label="true">是</el-radio>
          <el-radio v-model="fieldTypeConfig.selectConfig.group" :label="false">否</el-radio>
        </li>
        <li>
          <el-button type="primary" icon="el-icon-plus el-icon--left" @click="optionButAddClick(fieldTypeConfig.type)">
            添加选项
          </el-button>
        </li>
        <li v-for="(item,key) in fieldTypeConfig.selectConfig.option" :key="key">
          <div class="fieldTypeConfig-content-option">
            <span>label名称</span>
            <el-input
                v-model="item.label"
                placeholder="请输入label名称"
                clearable></el-input>
            <span>value值</span>
            <el-input
                v-model="item.value"
                placeholder="请输入value值"
                clearable></el-input>
            <el-button
                type="danger"
                icon="el-icon-delete el-icon--left"
                class="pl12"
                @click="optionDelAddClick(fieldTypeConfig.type,key)">
              删除
            </el-button>
          </div>
        </li>
      </ul>
      <!--级联选择器-->
      <ul class="fieldTypeConfig-content" v-if="fieldTypeConfig.type=='cascade'">
        <li>
          <span>是否可搜索</span>
          <el-radio v-model="fieldTypeConfig.cascadeConfig.filterable" :label="true">是</el-radio>
          <el-radio v-model="fieldTypeConfig.cascadeConfig.filterable" :label="false">否</el-radio>
        </li>
        <li>
          <span>触发方式</span>
          <el-select v-model="fieldTypeConfig.cascadeConfig.expandTrigger" placeholder="请选择触发方式">
            <el-option
                v-for="item in expandTriggerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </li>
        <li>
          <span>是否开启多选</span>
          <el-radio v-model="fieldTypeConfig.cascadeConfig.multiple" :label="true">是</el-radio>
          <el-radio v-model="fieldTypeConfig.cascadeConfig.multiple" :label="false">否</el-radio>
        </li>
      </ul>
      <!--日期选择器-->
      <ul class="fieldTypeConfig-content" v-if="fieldTypeConfig.type=='date'">
        <li>
          <span>选择日期类型</span>
          <el-select v-model="fieldTypeConfig.dateConfig.type" placeholder="选择日期类型">
            <el-option
                v-for="item in dateTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </li>
      </ul>
      <!--文件上传-->
      <ul class="fieldTypeConfig-content" v-if="fieldTypeConfig.type=='file'">
        <li>
          <span>是否支持多选文件</span>
          <el-radio v-model="fieldTypeConfig.fileConfig.multiple" :label="true">是</el-radio>
          <el-radio v-model="fieldTypeConfig.fileConfig.multiple" :label="false">否</el-radio>
        </li>
        <li>
          <span>最大允许上传个数</span>
          <el-input
              v-model="fieldTypeConfig.fileConfig.limit"
              placeholder="请输入最大允许上传个数"
              clearable></el-input>
        </li>
        <li>
          <span>文件上传类型</span>
          <el-input
              v-model="fieldTypeConfig.fileConfig.accept"
              placeholder="请输入文件上传类型，逗号隔开"
              clearable></el-input>
        </li>
        <li>
          <span>上传最大MB文件</span>
          <el-input
              v-model="fieldTypeConfig.fileConfig.size"
              placeholder="请输入最大上传几MB的文件"
              clearable></el-input>
        </li>
      </ul>
      <!--图片上传-->
      <ul class="fieldTypeConfig-content" v-if="fieldTypeConfig.type=='images'">
        <li>
          <span>是否支持多选文件</span>
          <el-radio v-model="fieldTypeConfig.imagesConfig.singleImage" :label="true">是</el-radio>
          <el-radio v-model="fieldTypeConfig.imagesConfig.singleImage" :label="false">否</el-radio>
        </li>
        <li>
          <span>是否支持多选文件</span>
          <el-radio v-model="fieldTypeConfig.imagesConfig.multiple" :label="true">是</el-radio>
          <el-radio v-model="fieldTypeConfig.imagesConfig.multiple" :label="false">否</el-radio>
        </li>
        <li>
          <span>最大允许上传个数</span>
          <el-input
              v-model="fieldTypeConfig.imagesConfig.limit"
              placeholder="请输入最大允许上传个数"
              clearable></el-input>
        </li>
        <li>
          <span>文件上传类型</span>
          <el-input
              v-model="fieldTypeConfig.imagesConfig.accept"
              placeholder="请输入文件上传类型，逗号隔开"
              clearable></el-input>
        </li>
        <li>
          <span>上传最大MB文件</span>
          <el-input
              v-model="fieldTypeConfig.imagesConfig.size"
              placeholder="请输入最大上传几MB的文件"
              clearable></el-input>
        </li>
      </ul>

      <div slot="footer" class="dialog-footer">
        <el-button @click="fieldTypeConfig.isDialog = false">取 消</el-button>
        <el-button type="primary" @click="fieldTypeConfigSubClick">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Clipboard from 'clipboard'
import draggable from 'vuedraggable'

export default {
  components: {draggable},
  props: [],
  data() {
    return {
      //配置需要的组件
      componentType: {
        title: true,
        tabs: true,
        table: true,
        dialog: true,
      },
      //按钮颜色
      butColorOptions: [
        {label: '白色', value: ''},
        {label: '蓝色', value: 'primary'},
        {label: '绿色', value: 'success'},
        {label: '灰色', value: 'info'},
        {label: '黄色', value: 'warning'},
        {label: '红色', value: 'danger'},
      ],
      //按钮类型
      butTypeOptions: [
        {label: '其他', value: ''},
        {label: '新增按钮', value: 'add'},
        {label: '删除按钮', value: 'del'},
        {label: '编辑按钮', value: 'edit'},
        {label: '查看按钮', value: 'see'},
      ],
      //字段类型
      fieldTypeOptions: [
        {label: '输入框', value: 'input'},
        {label: '文本域', value: 'textarea'},
        {label: '密码框', value: 'password'},
        {label: '单选框', value: 'radio'},
        {label: '多选框', value: 'checkbox'},
        {label: '下拉框', value: 'select'},
        {label: '级联选择器', value: 'cascade'},
        {label: '日期选择器', value: 'date'},
        {label: '文件上传', value: 'file'},
        {label: '图片上传', value: 'images'},
      ],
      //展开方式要哪中
      expandTriggerOptions: [
        {label: 'click触发',value:'click'},
        {label: 'hover触发',value:'hover'},
      ],
      //时间选择器类型
      dateTypeOptions:[
        {label: '年',value:'year'},
        {label: '月',value:'month'},
        {label: '日',value:'date'},
        {label: '日期和时间',value:'datetime'},
        {label: '多个日',value:'dates'},
        {label: '日期和时间范围',value:'datetimerange'},
        {label: '日期范围',value:'daterange'},
        {label: '月份范围',value:'monthrange'},
      ],
      //更具字段类型的配置
      fieldTypeConfig: {
        isDialog: false,
        name: '',//名称
        field: '',//字段名称
        type: '',//字段的类型
        active: '',//选择了当前的KEY
        currentPermissions: '',//可以见的端用,号隔开 都可以为空
        editCurrentPermissions: '',//哪些端可以修改,号隔开，都可以为空
        required: true,//是否必填
        rules: '',//自定义验证规则
        //文本域
        textareaConfig: {
          minRows: 2,//最小行数
          maxRows: 4,//最大行数
          maxlength: '',//输入框的字符长度
        },
        //单选框
        radioConfig: {
          option: [],//选项
        },
        //多选框
        checkboxConfig: {
          option: [], //选项
          checkAllBoolean: false,//是否全选
          min: '',//最少选几个
          max: '',//最多选一个
        },
        //下拉框
        selectConfig: {
          option: [],//选项
          filterable: true,//是否可搜索
          multiple: false,//是否多选
          group: false,//是否分组
        },
        //级联选择器
        cascadeConfig:{
          filterable: true,//是否可搜索
          expandTrigger:'hover',//展开触发器方式
          multiple:false,//是否开启多选
        },
        //日期选择器
        dateConfig:{
          type:'date',//日期类型
        },
        //文件上传
        fileConfig:{
          multiple:false,//是否支持多选文件
          limit:'',//最大允许上传个数
          accept:'.xls,.xlsx,.doc,.docx,.ppt,.pdf,.txt',//文件上传类型
          size:'10',//最大上传几MB的文件
        },
        //图片上传
        imagesConfig:{
          singleImage:false,//是否是单张图片
          multiple:false,//是否支持多选文件
          limit:'',//最大允许上传个数
          accept:'.png,.jpg',//文件上传类型
          size:'10',//最大上传几MB的文件
        }
      },
      //点了哪个配置按钮
      configureButtonProp: {
        type: 99,//title tabs table dialog
        jsonData: '',//配置代码
        show: false,
      },
      //代码生成数据
      codeGenerationProp: {
        show: false,
        allVueData: '',//全部vue 方法 和data
        allVue: '',//全部vue
        allMethodsData: '',//全部方法
        allData: '',//全部的data
        tileVueData: '',//title vue
        titleMethodsData: '', // title 方法
      },
      //基础字段配置
      basicsProp: {
        active: 0,//当前选了哪个分组
        addBasics: '',//添加分组的名称
        //添加新字段
        addField: {
          name: '',//名称
          field: '',//字段名称
          type: 'input',//字段类型
          currentPermissions: '',//可以见的端用,号隔开 都可以为空
          editCurrentPermissions: '',//哪些端可以修改,号隔开，都可以为空
          required: true,//是否必填
          rules: '',//自定义验证规则
          attribute: null,//基础属性配置
        },
        listProp: [
          {
            title: '基础信息',//分组名称
            //添加进来的字段
            fieldProp: [
              // {
              //   name: '',//名称
              //   field: '',//字段名称
              //   type: 'radio',//字段类型 input
              //   currentPermissions: '',//可以见的端用,号隔开 都可以为空
              //   editCurrentPermissions: '',//哪些端可以修改,号隔开，都可以为空
              //   required: false,//是否必填
              //   rules: '',//自定义验证规则
              //   attribute: null,//基础属性配置 如下拉框等配置都在里面
              // }
            ]
          }
        ]
      },
      //title 配置属性
      titleProp: {
        name: '',//标题名称
        class: '',//class名称
        operate: [
          // {
          //   name: '',//按钮名称
          //   type: 'primary',//按钮颜色 primary success info warning danger text
          //   icon: 'el-icon-check', //图标
          //   plain: false,// 是否朴素按钮 false 否 true 是
          //   round: false, // 是否圆角 false 否 true 是
          //   method: 'ButClick', //按钮方法 方法名后面自动会加上xxxClick
          //   id: '',//权限 空 默认显示
          //   butType: '',//按钮类型
          // }
        ]
      },
      //tabs 配置属性
      tabsProp: {
        tabsActive: '',//默认打开是什么状态
        tabsClick: 'tabsClick',//tabs点击方法
        tabsSwitchField: 'status',//切换状态字段
        tabsHeightShow: true,//是否有高级搜索
        tabsHeightSelectShow: true,//高级搜索是否默认下拉出来
        tabsHeightSearchClick: 'tabsSearchClick',//高级搜索方法名
        //标题数据
        titleList: [{
          name: '', //名称
          status: '',//状态
          totalField: '', //总数字段名
        }],
      },
    };
  },
  mounted() {
  },
  methods: {
    // 基础字段配置 按钮点击
    baseFieldsClick(type) {
      this.basicsProp.active = 0;
      this.toConfigureTypeClick(type);
    },
    //点了哪个配置按钮 num = title tabs table dialog
    toConfigureTypeClick(type) {
      this.configureButtonProp.type = type;
      this.configureButtonProp.show = false;
      this.codeGenerationProp.show = false;
    },
    //点击了哪个配置代码按钮
    configurationCodeClick(type) {
      this.configureButtonProp.show = true;
      this.codeGenerationProp.show = false;
      this.configureButtonProp.jsonData = '';
      switch (type) {
        case 'title':
          this.configureButtonProp.jsonData = JSON.stringify(this.titleProp, null, 2);
          break
      }
    },
    // 检测json格式
    isJSON(str) {
      if (typeof str == 'string') {
        try {
          let obj = JSON.parse(str);
          if (typeof obj == 'object' && obj) {
            return true;
          } else {
            return false;
          }
        } catch (e) {
          return false;
        }
      } else if (typeof str == 'object' && str) {
        return true;
      }
    },
    //保存json
    JsonSubumit() {
      if (!this.isJSON(this.configureButtonProp.jsonData)) {
        this.$message.error(`json格式错误`)
        return false
      }
      switch (this.configureButtonProp.type) {
        case 'title':
          this.titleProp = JSON.parse(this.configureButtonProp.jsonData);
          break
      }
      this.$message.success('json格式正确')
    },
    //复制代码
    copyButClick(data) {
      let clipboard = new Clipboard('.tag', {
        text: function () {
          return data
        }
      })
      clipboard.on('success', () => {
        this.$message.success('复制成功');
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$message.error('复制失败');
        clipboard.destroy()
      })
    },


    //基础字段配置 添加分组
    groupingAddClick() {
      if (!this.basicsProp.addBasics) {
        this.$message.error('请填写分组名称');
        return false
      }
      let jsonData = {
        title: this.basicsProp.addBasics,//分组名称
        fieldProp: []
      }
      this.basicsProp.listProp.push(jsonData);
    },
    //基础字段配置 删除分组
    groupingDelClick(key) {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.basicsProp.listProp.splice(key, 1);
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    //基础字段配置 分组被点击
    groupingListClick(key) {
      this.basicsProp.active = key;
    },
    //基础字段配置 添加字段按钮
    fieldAddClick() {
      let jsonData = JSON.parse(JSON.stringify(this.basicsProp.addField));
      this.basicsProp.listProp[this.basicsProp.active].fieldProp.push(jsonData);
      this.basicsProp.addField = this.$options.data().basicsProp.addField;
    },
    //基础字段配置 编辑图标
    fieldEditIconClick(key) {
      this.fieldTypeConfig = this.$options.data().fieldTypeConfig;
      let res = JSON.parse(JSON.stringify(this.basicsProp.listProp[this.basicsProp.active].fieldProp[key]));
      this.fieldTypeConfig.type = res.type;
      this.fieldTypeConfig.name = res.name;
      this.fieldTypeConfig.field = res.field;
      this.fieldTypeConfig.active = key;
      this.fieldTypeConfig.currentPermissions = res.currentPermissions;
      this.fieldTypeConfig.editCurrentPermissions = res.editCurrentPermissions;
      this.fieldTypeConfig.required = res.required;
      this.fieldTypeConfig.rules = res.rules;
      //自身带有配置属性
      if (res.attribute) {
        //配置里有这段
        if (this.fieldTypeConfig[`${res.type}Config`]) {
          this.fieldTypeConfig[`${res.type}Config`] = res.attribute;
        }
      }
      this.fieldTypeConfig.isDialog = true;
    },
    //基础字段配置 单选框/多选框/等多项选择的 添加
    optionButAddClick(type) {
      let jsonData = {label: '', value: ''}
      this.fieldTypeConfig[`${type}Config`].option.push(jsonData);
    },
    //基础字段配置 单选框/多选框/等多项选择的 删除
    optionDelAddClick(type, key) {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.fieldTypeConfig[`${type}Config`].option.splice(key, 1);
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    //基础字段配置 dialog 点击确定
    fieldTypeConfigSubClick() {
      // 更具字段类型的配置
      let res = JSON.parse(JSON.stringify(this.fieldTypeConfig));
      //基础字段配置
      let res1 = this.basicsProp.listProp[this.basicsProp.active].fieldProp[res.active];
      res1.name = res.name;//名称
      res1.field = res.field;//字段名称
      res1.type = res.type;//字段的类型
      res1.currentPermissions = res.currentPermissions;//可以见的端用,号隔开 都可以为空
      res1.editCurrentPermissions = res.editCurrentPermissions;//哪些端可以修改,号隔开，都可以为空
      res1.required = res.required;//是否必填
      res1.rules = res.rules;//自定义验证规则
      res1.attribute = res[`${res.type}Config`] ? res[`${res.type}Config`] : null;
      this.fieldTypeConfig.isDialog = false;
    },


    //基础字段配置 删除字段
    fieldDelIconClick(key) {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.basicsProp.listProp[this.basicsProp.active].fieldProp.splice(key, 1);
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },


    //点击title代码生成
    titleCodeGenerationClick() {
      this.configureButtonProp.show = false;
      this.codeGenerationProp.show = true;
      this.codeGenerationProp.vueData = '';
      let operate = '';
      let butContent = '';
      let titleMethodsData = '';
      if (this.titleProp.operate.length != 0) {
        for (let i = 0; i < this.titleProp.operate.length; i++) {
          //按钮vue生成
          if (!this.titleProp.operate[i].id) {
            butContent += `
                          <el-button
                              type="${this.titleProp.operate[i].type}"
                              icon="${this.titleProp.operate[i].icon}"
                              :plain="${this.titleProp.operate[i].plain}"
                              :round="${this.titleProp.operate[i].round}"
                              @click="${this.titleProp.operate[i].method}"
                          >
                              ${this.titleProp.operate[i].name}
                          </el-button>
              `
          } else {
            butContent += `
                          <el-button
                              type="${this.titleProp.operate[i].type}"
                              icon="${this.titleProp.operate[i].icon}"
                              :plain="${this.titleProp.operate[i].plain}"
                              :round="${this.titleProp.operate[i].round}"
                              @click="${this.titleProp.operate[i].method}"
                              v-if="$store.state.routerRole.includes(${this.titleProp.operate[i].id}) || $store.state.routerRole.includes('*')"
                          >
                              ${this.titleProp.operate[i].name}
                          </el-button>
              `
          }
          //方法生成
          if (this.titleProp.operate[i].butType == '') {
            titleMethodsData += `
                //title的 ${this.titleProp.operate[i].name} 按钮方法
                ${this.titleProp.operate[i].method}(){},
            `
          }
          //
        }
        operate = `
             <div>${butContent}</div>
          `
      }
      this.codeGenerationProp.tileVueData = `
             <!--title布局-->
            <div class="content-tile ${this.titleProp.class}">
                <div class="su-title">
                    <i class="el-icon-document-copy"></i>
                    <span>${this.titleProp.name}</span>
                </div>
                ${operate}
            </div>
          `
      this.codeGenerationProp.titleMethodsData = titleMethodsData;
      this.codeGenerationProp.allVue = this.codeGenerationProp.tileVueData
      this.codeGenerationProp.allMethodsData = this.codeGenerationProp.titleMethodsData;
      this.codeGenerationProp.allVueData = `
        ${this.codeGenerationProp.tileVueData}
        ${this.codeGenerationProp.allMethodsData}
      `;
    },
    //title 添加操作按钮
    titleButAddClick() {
      let jsonData = { //按钮集合
        name: '',//按钮名称
        type: 'primary',//按钮颜色 primary success info warning danger text
        icon: 'el-icon-check', //图标
        plain: false,// 是否朴素按钮 false 否 true 是
        round: false, // 是否圆角 false 否 true 是
        method: 'ButClick', //按钮方法 方法名后面自动会加上xxxClick
        id: '',//权限 空 默认显示
        butType: '',//按钮类型
      };
      this.titleProp.operate.push(jsonData);
    },
    //title 删除按钮
    titleButDelClick(key) {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.titleProp.operate.splice(key, 1);
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    //title 按钮类型
    titleButTypeClick(val, key) {
      switch (val) {
        case '':
          this.titleProp.operate[key].method = `ButClick`;
          this.titleProp.operate[key].icon = `el-icon-check`;
          break
        case 'add':
          this.titleProp.operate[key].method = `${val}ButClick`;
          this.titleProp.operate[key].icon = `el-icon-plus`;
          break
        case 'del':
          this.titleProp.operate[key].method = `${val}ButClick`;
          this.titleProp.operate[key].icon = `el-icon-delete-solid`;
          break
        case 'edit':
          this.titleProp.operate[key].method = `${val}ButClick`;
          this.titleProp.operate[key].icon = `el-icon-edit`;
          break
        case 'see':
          this.titleProp.operate[key].method = `${val}ButClick`;
          this.titleProp.operate[key].icon = `el-icon-view`;
          break
      }
    },
    //tabs 添加标题
    tabsButAddClick() {
      let jsonData = {
        name: '', //名称
        status: '',//状态
        totalField: '', //总数字段名
      }
      this.tabsProp.titleList.push(jsonData);
    },
    //tabs 删除标题按钮
    tabsButDelClick(key) {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tabsProp.titleList.splice(key, 1);
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    //tabs 添加高级搜索字段
    tabsHeightSearchButAddClick() {
    },
  },
};
</script>
<style>
.CodeMirror {
  height: 74vh;
}
</style>
<style lang="scss" scoped>
.head-content {
  border-bottom: 1px solid #dadada;
  padding-bottom: 12px;
}

.content-left {
  position: relative;
  width: 100%;
  height: 83vh;
  border-bottom: 1px solid #dadada;

  .parent {
    overflow: hidden;
    position: absolute; //position: relative;height: 100vh父元素是这个就要设置高度 position: absolute; 根据自己的需求改
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
  }

  //大布局左边
  .leftChild1 {
    float: left;
    overflow: auto;
    width: 380px;
    height: 100%;
    padding-top: 12px;
    border-right: 1px solid #dadada;

    .s {
      margin-bottom: 12px;
    }
  }

  //大布局右边
  .leftChild2 {
    float: left;
    overflow: auto;
    width: calc(100% - 381px);
    height: 100%;
    padding: 0 0 15px 0;

    .s {
      padding-right: 15px;

      .n1 {
        flex: 0 0 auto;
        width: 312px;
      }

      .bo {
        border-bottom: 1px dashed #dadada;
      }

      .n {
        font-size: 14px;
        @include flex();
        margin: 12px 0;

        .el-input {
          flex: 0 0 auto;
          width: 200px;
        }

        .el-select {
          flex: 0 0 auto;
          width: 200px;
        }

        .ui-fas {
          flex: 0 0 auto;
          width: 200px;
        }

        span {
          flex: 0 0 auto;
          width: 100px;
          text-align: right;
          margin-right: 12px;
          display: inline-block;
        }
      }
    }
  }

  //基础配置左边
  .leftChild3 {
    float: left;
    overflow: auto;
    width: 230px;
    height: 100%;
    border-right: 1px solid #dadada;

    .basics-content-left {
      position: relative;

      .title {
        position: fixed;
        width: 206px;
        padding: 12px;
        text-align: center;
        border-bottom: 1px solid #dadada;
        @include flex(nowrap, center);
        color: #409eff;
        cursor: pointer;

        .el-input {
          margin-right: 12px;
        }
      }

      .content {
        padding-top: 57px;
        font-size: 16px;

        li > div {
          @include flex(nowrap, space-between);
          height: 38px;
          line-height: 38px;
          padding: 0 12px;
          cursor: pointer;
        }

        li > div:hover {
          background: #f7f8fa;
        }

        .active {
          background: #f7f8fa;
          color: #3385ff;
        }

      }
    }
  }

  //基础配置右边
  .leftChild4 {
    float: left;
    overflow: auto;
    width: calc(100% - 232px);
    height: 100%;
    padding: 0 0 15px 0;

    .content {
      @include flex(wrap);

      .content-main {
        padding: 0 12px;
        flex: 0 0 auto;
        width: 310px;
        border: 1px solid #dadada;
        border-radius: 8px;
        font-size: 18px;
        line-height: 32px;
        margin: 0 0 12px 12px;

        > div {
          @include flex(wrap, space-between);
        }

        i {
          font-size: 18px;
          cursor: pointer;
        }

        i:hover {
          color: #409eff;
        }
      }
    }

  }
}

//字段详细配置
.fieldTypeConfig-content {
  .el-input {
    flex: 0 0 auto;
    width: 500px;
  }

  .el-select {
    flex: 0 0 auto;
    width: 500px;
  }

  li {
    @include flex();
    margin-bottom: 12px;

    span {
      flex: 0 0 auto;
      width: 120px;
      text-align: right;
      margin-right: 12px;
    }
  }

  &-option {
    @include flex();

    span {
      width: 88px !important;
    }

    .el-input {
      flex: 0 0 auto;
      width: 170px;
    }

    .el-select {
      flex: 0 0 auto;
      width: 170px;
    }
  }

}

.pl12 {
  margin-left: 12px;
}

.pd12 {
  margin-bottom: 12px;
}

.pd12-a {
  padding-bottom: 12px;
}
.color1{
  color: #409eff;
}

//配置代码
.configurationCode-css {
  font-size: 16px;
}

//代码生产
.codeGeneration-css {
  margin-right: 12px;
}
</style>
